<template>
    <div class="HbSelect fcc pos-re" @mouseenter="e_changView(true)" @mouseleave="e_changView(false)">
        <span v-text="title" class="title animation" :class="{circle: circle}" />

        <div class="dialogOut ilbk pos-ab bb" :class="clas">
            <div class="items animation cur" v-for="(v, index) in list" :key="index" v-text="v.txt" @click="$emit('select', index, v.value)" />
        </div>
    </div>
</template>

<script>
export default {
	name: 'HbSelect',
	props: {
		title: {
			default: '',
		},
		list: {
			default: [],
		},
		circle: {
			default: false,
		},
		lorr: {
			default: 'right',
		},
	},
	data() {
		return {
			hovered: false, // 是否鼠标悬浮
		}
	},
	computed: {
		clas() {
			let c0 = this.hovered ? ' ' : 'die '
			let c1 = 'dia' + this.lorr
			return c0 + c1
		},
	},
	created() {},
	methods: {
		e_changView(b) {
			this.hovered = b
		},
	},
}
</script>

<style scoped>
.HbSelect {
	--cclr: #c7cce6;
	--hclr: #7a98f7;
	z-index: 100;
	height: var(--h);
}
.HbSelect:hover {
	z-index: 200;
}
.title {
	padding: 0px 10px;
	font-size: 14px;
	color: var(--cclr);
}
.title:hover {
	color: var(--hclr);
	/* #262a42 */
}
.circle {
	border-radius: 1111px;
	border: 1px solid var(--cclr);
}
.circle:hover {
	border-color: var(--hclr);
}
.dialogOut {
	z-index: 1000;
	top: var(--h);
	overflow: hidden;
	box-shadow: 0 0 5px #11121d;
	border-radius: 4px;
	padding: 10px 0;
	background-color: #262a42;
}
.dialeft {
	left: 0;
}
.diaright {
	right: 0;
}
.items {
	width: 100px;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
	color: var(--cclr);
}
.items:hover {
	background-color: #1e2235;
	color: var(--hclr);
}
</style>